<template>
	<div class="list">
		<div class="item" v-for="item in data" :key="item.name">
			<p>
				<span>{{ item.value }}</span>
				<span>{{ item.unit }}</span>
			</p>
			<p>{{ item.name }}</p>
		</div>
	</div>
</template>

<script setup>
import { computed, defineEmits, onMounted, reactive, ref, defineProps, watch } from 'vue'

const props = defineProps({
	list: {
		type: Object,
		default: () => {}
	}
})

const data = ref([
	{
		name: '房屋总数量',
		value: 0,
		res: 'zcount',
		unit: '栋'
	},
	{
		name: '不满足两条疏散路径',
		value: 0,
		res: 'wdb',
		unit: '栋'
	},
	{
		name: '已满足两条疏散路径',
		value: 0,
		res: 'ydb',
		unit: '栋'
	},
	{
		name: '达标率',
		value: 0,
		res: 'dbl',
		unit: '%'
	}
])

watch(() => props.list, val => {
	if (!val) return
	Object.keys(val)?.forEach(key => {
		data.value?.map(item => {
			if (item.res === key) item.value = val?.[key]
		})
	})
}, { immediate: true, deep: true })
</script>

<style scoped lang="less">
.list {
	display: flex;
	margin: 24px 24px 0;
	gap: 24px;

	.item {
		background: #F6F6F6;
		flex: 1;
		height: 138px;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;

		p {
			height: 40px;
			line-height: 40px;
			font-size: 24px;

			&:nth-of-type(1) {
				white-space: nowrap;

				span {
					&:nth-of-type(1) {
						font-size: 40px;
						font-weight: 600;
						color: var(--van-primary-color);
						margin-right: 6px;
					}
				}
			}

			&:nth-of-type(2) {
				height: 80px;
				text-align: center;
				color: #B9B9B9;
			}
		}
	}
}
</style>
